<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址1">
      </el-table-column>
      <el-table-column prop="address" label="地址2">
      </el-table-column>
      <el-table-column prop="address" label="地址3">
      </el-table-column>
      <el-table-column prop="address" label="地址4">
      </el-table-column>
      <el-table-column prop="address" label="地址4">
      </el-table-column>
      <el-table-column prop="address" label="地址5">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleUpdate()">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="65%" :before-close="handleClose" :close-on-click-modal="false">
      <div>
        <div class="div_box" >
          <div v-for="(item, index) in tableData" :key="index" :class="item.flag == 1 ? 'width33' : 'width100'">
            <div class="name_l">{{ item.name }}</div>
            <div class="value_r" >{{ item.address }}</div>
          </div>
          <!-- <div>
            <div class="name_l">name:</div>
            <div class="value_r">value:</div>
          </div>
          <div>
            <div class="name_l">name:</div>
            <div class="value_r">value:</div>
          </div> -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎大所发生的',
        address: '上海市普陀区金沙江路 1518 弄qwerwqr',
        flag:1
      }, {
        date: '2016-05-04',
        name: '王小虎1',
        address: '上海市普陀区金沙江',
        flag:1
      }, {
        date: '2016-05-01',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1519 弄',
        flag:1
      }, {
        date: '2016-05-03',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1516 弄大商股份四方股份阿迪斯发斯蒂芬',
        flag:1
      }, {
        date: '2016-05-03',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1516 弄阿斯顿法师法师',
        flag:1
      },{
        date: '2016-05-03',
        name: '王小虎3是否对公司的',
        address: '上海市普陀区金沙江路 1516 弄',
        flag:0
      }, {
        date: '2016-05-03',
        name: '王小虎3asdfs阿斯顿发',
        address: '上海市普陀区金沙江路 1516 弄撒的发生懂法守法',
        flag:1
      },{
        date: '2016-05-03',
        name: '王小虎3是否对公司的',
        address: '上海市普陀区金沙江路 1516 弄',
        flag:0
      },],
      dialogVisible: false,
    }
  },
  watch: {},
  activated() { },
  created() { },
  methods: {
    handleUpdate() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  },
  mounted() { }
}
</script>

<style lang='scss'>
.div_box {
  width: 100%;
  border: 1px solid black;
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.div_box>div {
  border: 1px solid gainsboro;
  display: flex;
  box-sizing: border-box;
  // justify-content: space-around;
}
.width33{
  // width: 33.3%;
  flex: 0 0 33.3333%;
}
.width100{
  width: 100%;
}
.div_box>div .name_l {
  max-width: 150px;
  width: 180px;
  background: rgb(250,250,250);
  border-right: 1px solid gainsboro;
  box-sizing: border-box;
  padding: 5px 10px;
  margin-left: -1px;
  margin-top: -1px;
  text-align: right;
}

.div_box>div .value_r {
  padding: 5px 10px;
  width: calc(100% - 150px);
}
// .width100 .value_r {
//   padding: 5px 10px;
//   width: calc(100% - 140px);
// }
</style>